<?php
include("includes/header.php");

?>
<?php
//fungsi selected menu
function selectedMenu($judul){
	$file = $_SERVER['PHP_SELF'];
	$info = pathinfo($file);
	$file_name =  basename($file,'.'.$info['extension']);
	$menu = explode('-',$file_name);
	if($menu[0] == $judul){
		echo "class='active'";
	}
}
?>

<div class="row-fluid">
	<div class="span3" >
		<div class="tabbable">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#1" data-toggle="tab">Quick Search</a></li>
				<li><a href="#2" data-toggle="tab">Advanced Search</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="1">
					<form id="quickSearch" class="form-search well">
						<fieldset>
							<!-- <legend>Quick Search</legend> -->
							<input type="text" class="input-medium search-query" id="keySearch">
							<button type="submit" class="btn"><i class="icon-search"></i></button>
						</fieldset>
					</form>
				</div>
				<div class="tab-pane" id="2">
					<form id="advancedSearch" class="well">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="jenis_makanan">Jenis Makanan</label>
								<div class="controls">
									<select id="jenis_makanan">
										<?php
											$sql = "SELECT * FROM tb_dishes";
											$query = mysql_query($sql);
											while ($baris = mysql_fetch_array($query)) {
										?>
										<option value="<?php echo $baris["id"]; ?>"><?php echo ucfirst($baris["nama"]); ?></option>
										<?php
											}
										?>
									</select>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="khas_makanan">Khas Makanan</label>
								<div class="controls">
									<select id="khas_makanan">
										<?php
											$sql = "SELECT * FROM tb_khas_makanan";
											$query = mysql_query($sql);
											while ($baris = mysql_fetch_array($query)) {
										?>
										<option value="<?php echo $baris["id_khas"]; ?>"><?php echo ucfirst($baris["nama"]); ?></option>
										<?php
											}
										?>
									</select>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="khas_makanan">Jam Makan</label>
								<div class="controls">
									<div class="input-append bootstrap-timepicker">
										<input id="timepicker1" type="text" class="input-small">
										<span class="add-on"><i class="icon-time"></i></span>
									</div>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="khas_makanan">Budget</label>
								<div class="controls">
									<input type="text" class="input-medium" id="budget" value="50000">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="khas_makanan">Lokasi</label>
								<div class="controls">
									<select id="lokasi">
										<?php
											$sql = "SELECT * FROM tb_districts";
											$query = mysql_query($sql);
											while ($baris = mysql_fetch_array($query)) {
										?>
										<option value="<?php echo $baris["id_district"]; ?>"><?php echo ucfirst($baris["nama"]); ?></option>
										<?php
											}
										?>
									</select>
								</div>
							</div>
							<div class="form-actions">
								<button type="submit" class="btn btn-block"><i class="icon-search"></i></button>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
</div>
<!-- Content -->
<div class="span9">

	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCsdHNixpWF8nqBcLmrKFI2PMzVtCXN7Eg&sensor=false"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script src="js/markerclusterer.js" type="text/javascript"></script>
	<style type="text/css">
		#mapCanvas {
			width: 100%;
			height: 300px;
		}
		#mapCanvas img {
			max-width: none;
		}
		#restoPlacer>ul {
			margin-left: 0;
		}
		#restoPlacer>ul>li {
			float: left;
			width: 48%;
			margin-bottom: 10px;
		}
		.restoFeature {
			list-style: none;
			margin-left: 0;
		}
		.restoFeature li {
			float: left;
			margin-left: 5px;
		}
		.restoFeature li>img {
			border: 2px solid transparent;
			color: #fff;
			border-radius: 15px;
			padding-bottom: 3px;
			padding-left: 4px;
			padding-right: 4px;
		}
		.restoFeature li>img:hover {
			background-color: #eee;
			border: 2px solid #906090;
		}
	</style>
<!-- <div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/carousel/denpasar.jpg" width='80%' alt="">
<div class="carousel-caption">
<h4>Peta Wilayah Denpasar</h4>
</div>
</div>
<div class="item">
<img src="img/carousel/food.jpg" width='80%' alt="">
<div class="carousel-caption">
<h4>Aneka Kuliner</h4>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div> -->
<div id="mapCanvas"></div>

<div id="restoPlacer">
	<ul>

	</ul>
</div>

</div>

</div>
<!-- End Of Content -->

<?php
include("includes/footer.php");
?>

<!-- Local Javascipt -->
<script type="text/javascript">
	var z = 10;
	var latitude = -8.672465;
	var longitude = 115.220795;
	var objekArr = [];
	var objekArrTemp = [];
	var markerCluster;

	function initialize(){
//setting MapOption
myOptions = {
zoom: z, //menentukan zoom
center: new google.maps.LatLng(latitude,longitude), //menentukan posisi center maps
draggableCursor: '', //ketika mouseover kursor menjadi "move"
scaleControl: false,
zoomControlOptions: {
	position: google.maps.ControlPosition.LEFT_CENTER
}
};

//membuat maps
imap = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
imap.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var styleOptions = {
	name: "Dummy Style"
};

var MAP_STYLE = [
{
	featureType: "road",
	elementType: "all",
	stylers: [
	{ visibility: "on" }
	]
}
];
var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
imap.mapTypes.set("Dummy Style", mapType);
imap.setMapTypeId("Dummy Style");
// createMark("fetch-data.php?act=list_resto_all");

}

//---------------------------------------FUNGSI CLEAR MARKER----------------
function clearOverlays() {

	for (var i = 0; i < objekArr.length; i++ ) {
		objekArr[i].setMap(null);
	}
	//clusterMarker.clearMarkers();
	objekArr.length = 0;
	objekArrTemp.length = 0;
}
//---------------------------------------------------------------------

function createMark(urlData){
	clearOverlays();
	if (markerCluster) {
		markerCluster.clearMarkers();
	}
	$.getJSON(urlData, function(data){
		// console.log(data);
		$.each(data.resto,function(n,item){
			// console.log("haha");
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(item.lat,item.lng),
				icon: item.img,
				map: imap,
				title: item.name
			});

			// marker.setmap(imap);

			objekArr.push(marker);
			objekArrTemp[item.id] = marker;
		});
		setTimeout(function(){
			markerCluster = new MarkerClusterer(imap, objekArr, {gridSize: 20, maxZoom: 15});
		}, 500);
	});
}


// Function that renders the list items from our records
// function ulWriter(rowIndex, record, columns, cellWriter) {
// 	var cssClass = "span4", li;
// 	// console.log(cssClass);
// 	// if (rowIndex % 3 === 0) { cssClass += ' first'; }
// 	li = '<li class="itemRestaurant">'+ record.content +'</li>';
// 	// console.log(li);
// 	return li;
// }

// // Function that creates our records from the DOM when the page is loaded
// function ulReader(index, li, record) {
// 	var $li = $(li);
// 	record.content = $li.html();
// 	// console.log(record.content);
// 	// $caption = $li.find('.caption');
// 	// record.thumbnail = $li.find('.thumbnail-image').html();
// 	// record.caption = $caption.html();
// 	// record.label = $caption.find('h3').text();
// 	// record.description = $caption.find('p').text();
// 	// record.color = $li.data('color');
// }

var jamBuka;
var menitBuka;

function loadRestaurantsQuick(key) {
	$.ajax({
		url: 'includes/load-search-resto.php',
		type: 'POST',
		dataType: 'html',
		data: {key: key, act: "quick"},
	})
	.done(function(data) {
		$('#restoPlacer>ul').html(data);
		if ($('.itemRestaurant').length > 0) {
			var arrResto = [];
			$('.itemRestaurant').each(function(index, el) {
				arrResto.push($(el).data("id"));
			});
			// console.log(arrResto);
			createMark("fetch-data.php?act=get_resto_array&id="+arrResto);
		};
		console.log("success");
	})
	.fail(function() {
		console.log("error");
	})
	.always(function() {
		console.log("complete");
	});
}

function loadRestaurantsAdvanced() {
	$.ajax({
		url: 'includes/load-search-resto.php',
		type: 'POST',
		dataType: 'html',
		data: {
			act: "advanced",
			jenis_makanan: $('#jenis_makanan').val(),
			khas_makanan: $('#khas_makanan').val(),
			budget: $('#budget').val(),
			lokasi: $('#lokasi').val(),
			jam_makan: jamBuka+":"+menitBuka+":00"
		},
	})
	.done(function(data) {
		$('#restoPlacer>ul').html(data);
		if ($('.itemRestaurant').length > 0) {
			var arrResto = [];
			$('.itemRestaurant').each(function(index, el) {
				arrResto.push($(el).data("id"));
			});
			// console.log(arrResto);
			createMark("fetch-data.php?act=get_resto_array&id="+arrResto);
		};
		console.log("success");
	})
	.fail(function() {
		console.log("error");
	})
	.always(function() {
		console.log("complete");
	});
}

function loadRestaurantsAll() {
	$.ajax({
		url: 'includes/load-search-resto.php',
		type: 'POST',
		dataType: 'html',
		data: {act: "all"},
	})
	.done(function(data) {
		$('#restoPlacer>ul').html(data);
		if ($('.itemRestaurant').length > 0) {
			var arrResto = [];
			$('.itemRestaurant').each(function(index, el) {
				arrResto.push($(el).data("id"));
			});
			// console.log(arrResto);
			createMark("fetch-data.php?act=get_resto_array&id="+arrResto);
		};
		console.log("success");
	})
	.fail(function() {
		console.log("error");
	})
	.always(function() {
		console.log("complete");
	});
}

$('document').ready(function(){
	//alert("");
	initialize();

	loadRestaurantsAll();

	$('#quickSearch').submit(function(event) {
		/* Act on the event */
		event.preventDefault();
		var that = $(this);
		loadRestaurantsQuick(that.find("#keySearch").val());
	});

	$('#advancedSearch').submit(function(event) {
		/* Act on the event */
		event.preventDefault();
		var that = $(this);
		loadRestaurantsAdvanced();
	});

	$('#keySearch').typeahead({
		source: function(typeahead, query) {
			$.ajax({
				url: "includes/json_source_typeahead.php",
				dataType: "json",
				type: "POST",
				data: {
					key: query
				},
				success: function(data) {
					// console.log(data);
					var return_list = [], i = data.length;
					while (i--) {
						return_list[i] = {value: data[i].source};
					}
					typeahead.process(return_list);
				}
			});
		},
		onselect: function (obj) {
			// console.log(obj)
			$('#quickSearch').submit();
		}
	});

	// var dyna = $('#restoPlacer>ul').dynatable({
	// 	table: {
	// 		bodyRowSelector: '.itemRestaurant'
	// 	},
	// 	dataset: {
	// 		perPageDefault: 8,
	// 		perPageOptions: [8, 16, 20]
	// 	},
	// 	writers: {
	// 		_rowWriter: ulWriter
	// 	},
	// 	readers: {
	// 		_rowReader: ulReader
	// 	},
	// 	params: {
	// 		records: 'Restaurants'
	// 	}
	// }).data("dynatable");
	

	$('.restoFeature img').tooltip();

	$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
		var jumlah = 0;
		if (e.time.meridian == 'PM') {
			jumlah = 12;
		};
		jamBuka = (e.time.hours)+jumlah;
		menitBuka = e.time.minutes;
	});
});
</script>
<!-- End Of Local Javascipt -->
</body>
</html>